import React from "react";
// import dayjs from "dayjs";
// let calendar = require("dayjs/plugin/calendar");
// dayjs.extend(calendar);
import classes from "./Calendar.module.css";
import calendarSvg from "../../assets/svg/calendar.svg";
export default function Calendar({ theme }) {
    return (
        <div className={classes.calendar} style={{ backgroundColor: theme === "light" ? "#fff" : "#000" }}>
            <div
                className={classes.title}
                style={{
                    color: theme === "light" ? "#3b3dbf" : "#fff",
                }}
            >
                <img style={{ filter: theme === "light" ? "drop-shadow(#3b3dbf 300rem 0)" : "drop-shadow(rgb(255, 255, 255) 300rem 0)" }} src={calendarSvg} alt="calendar" />
                <span>July 2020</span>
            </div>
            <div className={classes.container}>
                <table>
                    <thead>
                        <tr>
                            <th>S</th>
                            <th>M</th>
                            <th>T</th>
                            <th>W</th>
                            <th>T</th>
                            <th>F</th>
                            <th>S</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td className={theme === "light" ? classes.active : classes.dark}>8</td>
                            <td>9</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    );
}
